<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>开发者密码管理器</title>
  <link rel="stylesheet" href="popup.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
  <!-- 主界面 -->
  <div id="main-view">
    <div class="header">
      <h1>开发者账号管理</h1>
      <button id="add-new" class="btn-add" title="添加新账号">
        <i class="fas fa-plus"></i>
      </button>
    </div>
    
    <div class="search-container">
      <input type="text" id="search-input" placeholder="搜索账号...">
    </div>
    
    <div class="filter-container">
      <span>地区筛选:</span>
      <select id="region-filter">
        <option value="all">全部</option>
        <!-- 其他选项将通过JS从localStorage动态加载 -->
      </select>
      <button id="search-btn" class="btn-search">搜索</button>
    </div>
    
    <!-- 凭据列表容器，将由JS动态填充 -->
    <div class="credentials-list">
      <!-- 凭据将在这里动态加载 -->
    </div>
  </div>
  
  <!-- 添加/编辑账号界面 -->
  <div id="edit-view" class="hidden">
    <div class="header">
      <button id="back-btn" class="btn-back">
        <i class="fas fa-arrow-left"></i>
      </button>
      <h1>添加新账号</h1>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label for="input-username">账号名称:</label>
        <input type="text" id="input-username" placeholder="请输入账号">
      </div>
      
      <div class="form-group">
        <label for="input-password">密码:</label>
        <input type="password" id="input-password" placeholder="请输入密码">
      </div>
      
      <div class="form-group">
        <label for="input-region">地区标记:</label>
        <input type="text" id="input-region" placeholder="如：测试环境-CN">
      </div>
      
      <div class="form-group">
        <label for="input-note">备注(选填):</label>
        <textarea id="input-note" placeholder="其他信息"></textarea>
      </div>
      
      <div class="form-actions">
        <button id="btn-cancel" class="btn-secondary">取消</button>
        <button id="btn-save" class="btn-primary">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 表单填充界面模板 (实际会通过内容脚本注入到页面) -->
  <div id="fill-form-template" class="hidden">
    <div class="fill-container">
      <div class="header">
        <h2>选择要填充的账号</h2>
      </div>
      
      <div class="search-container">
        <input type="text" id="fill-search" placeholder="搜索账号...">
      </div>
      
      <div class="fill-list">
        <!-- 填充内容将动态加载 -->
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html> 